﻿
<template>
  <div class="input_card" ref="input_card" v-bind:style="{height:input_card_height}">
      <header class="header_input_card" ref="header">
        写冒险卡
        <img src="../../static/img/goback_detail.png" alt="Alternate Text" class="header_goback" v-on:click="goback"/>
      </header>
      <div class="card_input_container">
        <input type="text" name="name" value="" placeholder="输入卡牌类型" class="card_input" ref="input_v"/>
        <div class="card_input_btn" v-on:click="certain_btn">
          确认
        </div>
      </div>
       <div class="card_bg_select">
         <img src="../../static/img/user_index/bg_card_1.png" alt="Alternate Text"  class="card_bg_img" v-bind:class="{card_act:select_bg[0].flag}" v-on:click="card_bg_img(0)"/>
         <img src="../../static/img/user_index/card_bg.png"   alt="Alternate Text"  class="card_bg_img" v-bind:class="{card_act:select_bg[1].flag}" v-on:click="card_bg_img(1)"/>
         <img src="../../static/img/user_index/card_bg_2.png" alt="Alternate Text"  class="card_bg_img" v-bind:class="{card_act:select_bg[2].flag}" v-on:click="card_bg_img(2)"/>
       </div>
        <!-- 热门卡牌类型 s -->
       <div class="hot_cl">
         <div class="hot_header">
           热门卡牌类型
         </div>
         <div class="collect_hot_wrapper">
           <div class="collect_hot_box" v-for="qs_list in qs_list" v-on:click="cover_input_value(qs_list.group)">
             {{qs_list.group}}
           </div>
         </div>
       </div>
        <!-- 热门卡牌类型 e -->
   </div>
</template>

<script>
  import { mapState, mapMutations, mapActions, mapGetters } from 'vuex';
  //limit_Scroll
  import '../../static/css/mint-ui/style.css'
  //limit_Scroll
  import { Toast, Indicator, MessageBox } from 'mint-ui';
  import qs from 'qs';
  import "../../static/css/user_index/input_card.css"
  export default {
    name: 'Detail_Exchange',
    data() {
      return {
        msg: 'Welcome to Your Vue.js App',
        divTop: "",
        img_list: [],
        show_nav: false,
        card_imput_show: true,
        input_card_height: "",
        sel_bg_id:1,
        select_bg: [{ flag: false }, { flag: true }, { flag: false }],
        qs_list:[]
      }
    },
    props: ['show'],
    beforeCreate: function () {

    },
    methods: {
      //用户添加 冒险卡分类
      certain_btn: function () {
        let id = location.search.split("user_id=")[1];
        this.user_id = id;
        ///api/user / personalHomepage / addCardSorting
        Indicator.open();
        this.$http.post('/yizhiweimen/api/user/personalHomepage/addCardSorting',
          qs.stringify(
            {
              "sorting": this.$refs.input_v.value,
              "cover.id": this.sel_bg_id,
              "user.id": id
            })
         )
          .catch((thrown) => {
            Indicator.close()
            Toast({
              message: '网络出错',
              position: 'bottom',
              duration: 2000
            });
          }).then((e) => {
            Indicator.close()
            //记录id
            Toast
              ({
              message: e.data,
              position: 'bottom',
              duration: 2000
            })
            console.log(e)
          })
      },
      cover_input_value: function (e) {
        this.$refs.input_v.value = e;
      },
      goback: function () {
        this.$emit('show');
      },
      card_bg_img: function (id) {
        let _id = 1;
        for (let x = 0; x < this.select_bg.length; x++) {
          this.select_bg[x].flag = false;
        }
        this.select_bg[id].flag = true;
        //if (id == 0) {
        //  _id = 1;
        //} else if (id == 1) {
        //  _id = 2;
        //} else if (id == 3) {
        //  _id = 3
        //}
        this.sel_bg_id = _id
      }
      /// api / user / personalHomepage / addAdventureCard
    },
    components: {

    },
    mounted: function () {
      this.$nextTick(() => {
        console.log(window.getComputedStyle(this.$refs.header).height)
        this.input_card_height = document.body.clientHeight - window.getComputedStyle(this.$refs.header).height;
      })
      Indicator.open();
      this.$http.get('/yizhiweimen/api/user/personalHomepage/getHotcardSorting')
        .catch((thrown) => {
          Indicator.close()
          Toast({
            message: '网络出错',
            position: 'bottom',
            duration: 2000
          });
        }).then((e) => {
          Indicator.close()
          //记录id
          this.qs_list = e.data
        })
    },
    components: {

    }
  }
</script>
<style scoped>
  .collect_hot_box{
    margin-top:0.4rem;
  } 
  .collect_hot_wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content:flex-start;
  }
  /*card_input_btn s*/
  .card_input_container {
    display: flex;
  
  } 
  .card_input {
    padding-left:2vw;
    width: 60vw;
    margin-left:10vw;
    color:#fff;
  } 
  .card_input_btn {
    width: 20vw;
    text-align: center;
    height: 2rem;
    line-height: 2rem;
    border-radius: 2vw;
    background-color: #9f5c2f;
    margin-top:1.5vw;
    margin-left:1vw;
    color: #fff;
  }
  /* card_input_btn e*/
  .collect_hot_box {
    font-size: 0.7rem;
    height: 1.5rem;
    line-height: 1.5rem;
    color: #fff;
    background-color: #96e54c;
    padding-right: 9vw;
    border-radius: 1vw;
    padding-left: 8vw;
   
  } 
  .hot_header {
    font-size: 0.7rem;
    color: #fea500;
    margin-bottom: 0.5rem;
    text-align: left;
    margin-left: 5vw;
    margin-top: 0.5rem;
  } 
  .header_goback {
    position: absolute;
    top: 50%;
    left: 3.2vw;
    width: 5.2vw;
    transform: translateY(-50%);
  }
  .collect_hot_wrapper{
    display:flex;
    justify-content:space-between;
  }
  .header_input_card{
    height:9.3vw;
    line-height:9.3vw;
  }
</style>
